<template>
  <div class="yzh-basic" v-if="formData">
    <el-descriptions title="基本信息" :column="2" border>
      <template #title>
        <TitleName title="基本信息" icon="i-carbon-bookmark-filled"></TitleName>
      </template>
      <el-descriptions-item
        label="订单"
        label-align="right"
        label-class-name="w-3/24"
        class-name="w-9/24"
        >{{ formData.title }}</el-descriptions-item
      >
      <el-descriptions-item
        label="关联客户"
        label-align="right"
        label-class-name="w-3/24"
      >
        <el-link
          v-if="formData.customerType == 'customer'"
          type="primary"
          :underline="false"
          @click="
            goTo('/customerManage/customerModules/customerDetails', {
              customerId: formData.customerId
            })
          "
          >{{ formData.customerName }}</el-link
        ><el-link
          v-else-if="formData.customerType == 'cusLink'"
          type="primary"
          :underline="false"
          @click="
            goTo('/customerManage/contactsModules/contactsDetails', {
              contactsId: formData.customerId
            })
          "
          >{{ formData.customerName }}</el-link
        ></el-descriptions-item
      >
      <el-descriptions-item label="订单总金额" label-align="right">{{
        formData.price
      }}</el-descriptions-item>
      <el-descriptions-item label="产品记录" label-align="right">
        {{ formData.productNum }}条
      </el-descriptions-item>
      <el-descriptions-item label="状态" label-align="right">
        <!-- <el-link
          v-if="formData.oppositeId"
          type="primary"
          :underline="false"
          @click="
            goTo('/sales/indent/salesOrderDetails', {
              salesOrderId: formData.oppositeId
            })
          "
          ><dict-drop
            :options="order_status"
            :value="formData.status"
            :isDrop="false"
        /></el-link> -->
        <dict-drop
          :options="order_status"
          :value="formData.status"
          :isDrop="false"
        />
      </el-descriptions-item>
      <el-descriptions-item label="关联项目" label-align="right">
        <el-link
          type="primary"
          :underline="false"
          @click="
            goTo('/sales/projectManage/projectDetails', {
              id: formData.projectId
            })
          "
          >{{ formData.projectName }}</el-link
        ></el-descriptions-item
      >
      <el-descriptions-item label="业务板块" label-align="right">
        <dict-drop
          :options="order_business_type"
          :value="formData.businessType"
          :isDrop="false"
      /></el-descriptions-item>
      <el-descriptions-item label="关联合同" label-align="right">
        <span v-for="(item, index) in formData.contractNames" :key="index">
          <el-link
            type="primary"
            :underline="false"
            @click="
              goTo('/sales/contract/contractDetail', {
                id: formData.contractIds[index]
              })
            "
            >{{ item }}</el-link
          >
          <span v-if="index !== formData.contractNames.length - 1" class="pr-1"
            >,</span
          >
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="所属单位" label-align="right">{{
        formData.deptName
      }}</el-descriptions-item>
      <el-descriptions-item label="诺诺合同" label-align="right">
        <el-link
          type="primary"
          :underline="false"
          @click="nuonuoContractDownload(formData.contractNo)"
          >{{ formData.contractNo }}</el-link
        >
        <span v-if="formData.contractStatus">
          (<dict-drop
            class="inline-block"
            :options="nuonuo_contract_status"
            :value="formData.contractStatus"
            :isDrop="false"
          />)
        </span>
        <el-button
          v-if="formData.contractNo"
          type="primary"
          plain
          size="small"
          :disabled="
            formData.contractStatus == '4' || formData.contractStatus == '5'
          "
          @click="
            () => {
              dialogVisible = true
            }
          "
          >作废</el-button
        >
      </el-descriptions-item>
      <el-descriptions-item label="合同备注" label-align="right">{{
        formData.contractRemark
      }}</el-descriptions-item>
      <el-descriptions-item label="业务类型" label-align="right">
        <dict-drop
          :options="order_biz_type"
          :value="formData.bizType"
          :isDrop="false"
      /></el-descriptions-item>
      <el-descriptions-item label="业务部门" label-align="right">{{
        formData.transactionDeptName
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="签单日期" label-align="right">{{
        formData.orderBelongDeptName
      }}</el-descriptions-item> -->
      <el-descriptions-item label="业务员" label-align="right">{{
        formData.transactionName
      }}</el-descriptions-item>
      <el-descriptions-item label="订单来源" label-align="right"
        ><dict-drop
          :options="order_source"
          :value="formData.source"
          :isDrop="false"
      /></el-descriptions-item>
      <el-descriptions-item label="对应单据" label-align="right">
        <el-link
          v-for="(item, index) in formData.oppositeInfoList"
          type="primary"
          :underline="false"
          @click="
            goTo('/sales/indent/salesOrderDetails', {
              salesOrderId: item.id
            })
          "
          >{{ item.contractOrderNumber
          }}<span v-show="index + 1 < formData.oppositeInfoList.length">;</span>
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="备注信息" label-align="right">{{
        formData.remark
      }}</el-descriptions-item>
      <el-descriptions-item
        v-if="formData.stopReason"
        label="关闭原因"
        label-align="right"
        >{{ formData.stopReason }}</el-descriptions-item
      >
    </el-descriptions>
    <el-descriptions title="回款信息" :column="2" border>
      <template #title>
        <TitleName
          title="回款信息"
          icon="i-carbon-bookmark-filled"
          class="pt-6"
        ></TitleName>
      </template>
      <el-descriptions-item
        label="回款计划"
        label-align="right"
        label-class-name="w-3/24"
        class-name="w-9/24"
        >{{ formData.allPeriod }}期</el-descriptions-item
      >
      <el-descriptions-item
        label="回款截止日期"
        label-align="right"
        label-class-name="w-3/24"
        >{{
          parseTime(formData.repaymentDeadline, '{y}-{m}-{d}')
        }}</el-descriptions-item
      >
      <el-descriptions-item label="已完成计划" label-align="right"
        >{{ formData.donePlan }}期</el-descriptions-item
      >
      <el-descriptions-item label="已逾期计划" label-align="right">
        {{ formData.overduePlan }}期
      </el-descriptions-item>
      <el-descriptions-item label="已回款金额(元)" label-align="right">
        {{ formData.repaymentPrice }}</el-descriptions-item
      >
      <el-descriptions-item label="未回款金额(元)" label-align="right">{{
        formData.unRepaymentPrice
      }}</el-descriptions-item>
      <el-descriptions-item label="已开票金额(元)" label-align="right">
        {{ formData.invoicedPrice }}</el-descriptions-item
      >
      <el-descriptions-item label="未开票金额(元)" label-align="right">{{
        formData.unInvoicePrice
      }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="系统信息" :column="2" border>
      <template #title>
        <TitleName
          title="系统信息"
          icon="i-carbon-bookmark-filled"
          class="pt-6"
        ></TitleName>
      </template>
      <el-descriptions-item
        label="系统编号"
        label-align="right"
        label-class-name="w-3/24"
        class-name="w-9/24"
        >{{ formData.number }}</el-descriptions-item
      >
      <el-descriptions-item
        label="协作人员"
        label-align="right"
        label-class-name="w-3/24"
        >{{ formData.assistUserName }}</el-descriptions-item
      >
      <el-descriptions-item label="创建时间" label-align="right">{{
        parseTime(formData.createTime, '{y}-{m}-{d}')
      }}</el-descriptions-item>
      <el-descriptions-item label="创建人员" label-align="right">
        {{ formData.createName }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间" label-align="right">
        {{
          parseTime(formData.updateTime, '{y}-{m}-{d}')
        }}</el-descriptions-item
      >
      <el-descriptions-item label="最后跟进时间" label-align="right">{{
        parseTime(formData.followTime, '{y}-{m}-{d}')
      }}</el-descriptions-item>
    </el-descriptions>

    <el-dialog
      v-model="dialogVisible"
      title="作废"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="cancelRef"
        :model="cancelForm"
        :rules="cancelRules"
        label-width="140px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="作废原因" prop="cancelReason">
              <el-input
                v-model="cancelForm.cancelReason"
                type="textarea"
                rows="4"
                maxlength="100"
                show-word-limit
                placeholder="请输入作废原因"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="cancelNuonuo()"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Overview">
import { reactive, toRefs, ref, defineEmits } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useCommonStore from '@/store/modules/common'
import {
  order_business_type, //订单业务板块
  order_status, //订单状态
  order_biz_type, //业务类型
  nuonuo_contract_status, //诺诺合同状态
  order_source //订单来源
} from '@/hooks/dict/order'
import {
  contractDownload, //合同下载接口
  raiseCancel //发起合同作废
} from '@/api/nuonuoContract/index'
import { format } from 'date-fns'
import { base64Download } from '@/utils/commo'

const emit = defineEmits(['parentFu'])
const router = useRouter()
const route = useRoute()
const props = defineProps({
  orderData: {
    type: Object,
    require: true
  }
})
const { proxy } = getCurrentInstance()
const commonStore = useCommonStore()
const companyData = ref([])
commonStore.getCompanyData().then(e => {
  companyData.value = e
})
const data = reactive({
  formData: {},
  cancelForm: {
    cancelReason: '', //作废原因
    contractNo: '' //合同id
  },
  cancelRules: {
    cancelReason: [
      {
        required: true,
        message: '请输入作废合同',
        trigger: 'blur'
      }
    ]
  },
  dialogVisible: false
})
let { formData, cancelForm, cancelRules, dialogVisible } = toRefs(data)

watchEffect(() => {
  if (props.orderData) {
    formData.value = props.orderData
  }
})

// 诺诺合同下载
function nuonuoContractDownload(id) {
  contractDownload({ contractNo: id }).then(ref => {
    if (ref.code !== 200) return proxy.$modal.msgError('下载失败')
    console.log('合同下载==>', ref)
    // window.open(base64Head + ref.data, '_blank')
    // window['filter'] = {
    //   src: base64Head + ref.data
    // }
    // window.open('/#/print-preview-web')
    base64Download(
      'pdf',
      ref.data,
      `合同${format(new Date(new Date().getTime()), 'yyyy-MM-dd HH:mm:ss')}.pdf`
    )
  })
}
// 作废诺诺合同
function cancelNuonuo() {
  proxy.$refs.cancelRef.validate(async (valid, msg) => {
    if (valid) {
      cancelForm.value.contractNo = formData.value.contractNo
      raiseCancel(cancelForm.value).then(ref => {
        if (ref.code !== 200) return
        dialogVisible.value = false
        proxy.$modal.msgSuccess('作废成功')
        emit('parentFu')
        // console.log('作废==》', ref)
      })
    }
  })
}
function goTo(url, data) {
  router.push({ path: url, query: data })
}

function handleClose() {}
</script>
<style lang="scss" scoped></style>
